<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>

		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js" charset="UTF-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/vue-cookies.js"></script>
		<script src="css/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<div id="app">
			<ul class="layui-nav">
				<li class="layui-nav-item">
					<a href="index.html">主页</a>
				</li>
			
			<li  v-show="!loginflag" class="layui-nav-item" style="margin-left: 400px;">
				<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
			</li>
				<li  v-show="loginflag" class="layui-nav-item" style="margin-left: 400px;">
					<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
					<dl class="layui-nav-child">
						<dd> <a href="user.html">个人中心</a></dd>
						<dd><a href="javascript:void(0);" onclick="clearAllCookie()">注销</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="order.html">我的订单</a>
					<dl class="layui-nav-child">
				<dd><a href="HistoryOrder.html">历史订单</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="shoppingcart.html">购物车<span class="layui-badge">{{shoppingcartnumber}}</span></a>
				</li>
				<li v-show="$cookies.get('userType')==1" class="layui-nav-item">
				<a href="myShop.html">创建商品</a>
				<dl class="layui-nav-child">
					<dd><a href="myShopOrder.html">商家订单</a></dd>
				</dl>
				</li>
			</ul>
			<div class="shopping-cart-box">
				<div style="text-align: center;line-height: 40px;" v-if="!shoppingCartList[0]">
				无购物车信息
				</div>
				<div class="shoppping-cart-item" v-if="shoppingCartList[0]">
					<div class="shopping-cart-item-shopName">店铺：<a class="shopping-cart-item-shopName2">{{shoppingCartList[0].shopName}}</a>
					</div>
					<div class="shopping-cart-item-image">
						<img :src="shoppingCartList[0].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="shopping-cart-item-itemName">{{shoppingCartList[0].itemName}}</div>
					<div class="shopping-cart-item-itemPrice">¥{{shoppingCartList[0].itemPrice}}</div>
					<div class="shopping-cart-item-itemNumber">

						<button id="0" type="button" @click="subBuyNumber" class="layui-btn" style="height: 30px;width:30px;padding: 0px;float:left">-</button>
						<input v-model="shoppingCartList[0].number" class="layui-input" style="height:30px;padding:0;width:30px;float:left;padding-bottom:3px;text-align:center;display:inline;">
						<button id="0" type="button" @click="addBuyNumber" class="layui-btn" style="height: 30px;width:30px;padding: 0px;float:left">+</button>
					</div>
					<div class="shopping-cart-item-button">
						<button id="0" @click="createOrder" class="layui-btn layui-btn-warm" style=" margin-left:20px;font-size:15px;width:130px;heigth:45px;background-color:#ffe4d0;color:#e5511d;float: left;border: 1px solid #F0CAB6;">立即购买</button>
						<button id="0" class="layui-btn layui-btn-danger" style="float: left;width:130px;margin-left:20px;margin-top:10px;" @click="delShoppingCart">删除</button>
					</div>
				</div>

				<div class="shoppping-cart-item" v-if="shoppingCartList[1]">
					<div class="shopping-cart-item-shopName">店铺：<a class="shopping-cart-item-shopName2">{{shoppingCartList[1].shopName}}</a>
					</div>
					<div class="shopping-cart-item-image">
						<img :src="shoppingCartList[1].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="shopping-cart-item-itemName">{{shoppingCartList[1].itemName}}</div>
					<div class="shopping-cart-item-itemPrice">¥{{shoppingCartList[1].itemPrice}}</div>
					<div class="shopping-cart-item-itemNumber">

						<button id="1" type="button" @click="subBuyNumber" class="layui-btn" style="height: 30px;width:30px;padding: 0px;float:left">-</button>
						<input v-model="shoppingCartList[1].number" class="layui-input" style="height:30px;padding:0;width:30px;float:left;padding-bottom:3px;text-align:center;display:inline;">
						<button id="1" type="button" @click="addBuyNumber" class="layui-btn" style="height: 30px;width:30px;padding: 0px;float:left">+</button>
					</div>
					<div class="shopping-cart-item-button">
						<button id="1" @click="createOrder" class="layui-btn layui-btn-warm" style=" margin-left:20px;font-size:15px;width:130px;heigth:45px;background-color:#ffe4d0;color:#e5511d;float: left;border: 1px solid #F0CAB6;">立即购买</button>
						<button id="1" class="layui-btn layui-btn-danger" style="float: left;width:130px;margin-left:20px;margin-top:10px;" @click="delShoppingCart">删除</button>
					</div>
				</div>

				<div class="shoppping-cart-item" v-if="shoppingCartList[2]">
					<div class="shopping-cart-item-shopName">店铺：<a class="shopping-cart-item-shopName2">{{shoppingCartList[2].shopName}}</a>
					</div>
					<div class="shopping-cart-item-image">
						<img :src="shoppingCartList[2].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="shopping-cart-item-itemName">{{shoppingCartList[2].itemName}}</div>
					<div class="shopping-cart-item-itemPrice">¥{{shoppingCartList[2].itemPrice}}</div>
					<div class="shopping-cart-item-itemNumber">

						<button id="2" type="button" @click="subBuyNumber" class="layui-btn" style="height: 30px;width:30px;padding: 0px;float:left">-</button>
						<input v-model="shoppingCartList[1].number" class="layui-input" style="height:30px;padding:0;width:30px;float:left;padding-bottom:3px;text-align:center;display:inline;">
						<button id="2" type="button" @click="addBuyNumber" class="layui-btn" style="height: 30px;width:30px;padding: 0px;float:left">+</button>
					</div>
					<div class="shopping-cart-item-button">
						<button id="2" @click="createOrder" class="layui-btn layui-btn-warm" style=" margin-left:20px;font-size:15px;width:130px;heigth:45px;background-color:#ffe4d0;color:#e5511d;float: left;border: 1px solid #F0CAB6;">立即购买</button>
						<button id="2" class="layui-btn layui-btn-danger" style="float: left;width:130px;margin-left:20px;margin-top:10px;" @click="delShoppingCart">删除</button>
					</div>
				</div>

				<div class="shoppping-cart-item" v-if="shoppingCartList[3]">
					<div class="shopping-cart-item-shopName">店铺：<a class="shopping-cart-item-shopName2">{{shoppingCartList[3].shopName}}</a>
					</div>
					<div class="shopping-cart-item-image">
						<img :src="shoppingCartList[3].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="shopping-cart-item-itemName">{{shoppingCartList[3].itemName}}</div>
					<div class="shopping-cart-item-itemPrice">¥{{shoppingCartList[3].itemPrice}}</div>
					<div class="shopping-cart-item-itemNumber">

						<button id="3" type="button" @click="subBuyNumber" class="layui-btn" style="height: 30px;width:30px;padding: 0px;float:left">-</button>
						<input v-model="shoppingCartList[1].number" class="layui-input" style="height:30px;padding:0;width:30px;float:left;padding-bottom:3px;text-align:center;display:inline;">
						<button id="3" type="button" @click="addBuyNumber" class="layui-btn" style="height: 30px;width:30px;padding: 0px;float:left">+</button>
					</div>
					<div class="shopping-cart-item-button">
						<button id="3" @click="createOrder" class="layui-btn layui-btn-warm" style=" margin-left:20px;font-size:15px;width:130px;heigth:45px;background-color:#ffe4d0;color:#e5511d;float: left;border: 1px solid #F0CAB6;">立即购买</button>
						<button id="3" class="layui-btn layui-btn-danger" style="float: left;width:130px;margin-left:20px;margin-top:10px;" @click="delShoppingCart">删除</button>
					</div>
				</div>




			</div>
			<div id="pageDiv" style="text-align: center;"></div>
		</div>





		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					userShowName: '请登录',
					username: '',
					loginflag: false,
					shoppingcartnumber: 0,
					shoppingCartList: [{
						itemPrice: -1,
						itemName: -1,
						shopName: -1,
						number: -1,
					}, {
						itemPrice: -1,
						itemName: -1,
						shopName: -1,
						number: -1,
					}, {
						itemPrice: -1,
						itemName: -1,
						shopName: -1,
						number: -1,
					}, {
						itemPrice: -1,
						itemName: -1,
						shopName: -1,
						number: -1,
					}],
					page: 1,
					haveInit: false,
				},
				filters: {
					keepTwoNum: function(value) {
						value = Number(value)
						return value.toFixed(2)
					}
				},
				methods: {
					getpage: function(total, curr) {
						layui.use('laypage', function() {
							var laypage = layui.laypage;

							//执行一个laypage实例
							laypage.render({
								elem: 'pageDiv', //注意，这里的 test1 是 ID，不用加 # 号
								count: total, //数据总数，从服务端得到
								limit: 4,
								jump: function(obj, first) { //obj为当前页的属性和方法，第一次加载first为true
									console.log("laypage()")
									console.log(obj)
									//非首次加载 do something			
									vm.page = obj.curr;
									if (!first) {
										vm.initShoppingCartList()
									}

								},


							});
						})
					},
					addBuyNumber: function(obj) {
						console.log(obj.target.id)
						this.shoppingCartList[obj.target.id].number++
						this.alterShoppingCartNumber(obj)
					},
					subBuyNumber: function(obj) {
						if (this.shoppingCartList[obj.target.id].number > 1) {
							console.log(obj.target.id)
							this.shoppingCartList[obj.target.id].number--
							this.alterShoppingCartNumber(obj)
						} else
							alert("数量不能再减了")
					},
					alterShoppingCartNumber: function(obj) {
						let param = new URLSearchParams()
						param.append('userId', $cookies.get("userId"))
						param.append('passWord', $cookies.get("passWord"))
						param.append('userName', $cookies.get("userName"))
						param.append('itemId', vm.shoppingCartList[obj.target.id].itemId)
						param.append('Number', vm.shoppingCartList[obj.target.id].number)
						console.log(param.toString())
						//加载购物车列表
						axios.post(URL + '/shoppingCart/alterShoppingCartNumber', param)
							.then(function(response) {
								if (response.data.code == 1) {
									console.log(response.data)
									console.log("加载购物车成功")
									if (!vm.haveInit) {
										console.log("执行lay")
										vm.getpage(response.data.count, 1)
										vm.haveInit = true
									}
									console.log(response.data)
									vm.shoppingcartnumber.response.data.count
								} else if (response.data.code == 0) {
									console.log(response)
									console.log(response.data.msg)

								}
							})
							.catch(function(error) {
								console.log(error);
							});
					},
					delShoppingCart: function(obj) {
						layui.use('layer', function(){
							  var layer = layui.layer;
							  layer.open({
							    type: 1
							    ,title:"订单明细"//不显示标题栏
							    ,closeBtn: false
							    
							    ,shade: 0.8
							    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
							    ,btn: ['确认删除', '取消']
							    ,btnAlign: 'c'
							    ,moveType: 1 //拖拽模式，0或者1
							    ,content: '<div style="padding: 76px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">是否要从购物车中移除商品</div>'
							    ,yes: function(index, layero){
							      let param = new URLSearchParams()
							      param.append('userId', $cookies.get("userId"))
							      param.append('passWord', $cookies.get("passWord"))
							      param.append('userName', $cookies.get("userName"))
							      param.append('itemId', vm.shoppingCartList[obj.target.id].itemId)
							      console.log(param.toString())
							      //加载购物车列表
							      axios.post(URL + '/shoppingCart/delShoppingCart', param)
							      	.then(function(response) {
							      		if (response.data.code == 1) {
											layer.msg("移除成功")
							      				vm.getpage(response.data.count, 1)
							      				console.log(response.data)
							      				vm.shoppingCartList=response.data.result
							      				vm.shoppingcartnumber=response.data.count
							      		} else if (response.data.code == 0) {
							      			console.log(response)
							      			console.log(response.data.msg)
							      
							      		}
							      	})
							      	.catch(function(error) {
							      		console.log(error);
							      	});
								   layer.close(index);
							      },
								  btn2: function(index, layero){
							  }
							  });
							});  
							
							
					
					},
					delShoppingCartWithoutTips: function(obj) {
			
							      let param = new URLSearchParams()
							      param.append('userId', $cookies.get("userId"))
							      param.append('passWord', $cookies.get("passWord"))
							      param.append('userName', $cookies.get("userName"))
							      param.append('itemId', vm.shoppingCartList[obj.target.id].itemId)
							      console.log(param.toString())
							      //加载购物车列表
							      axios.post(URL + '/shoppingCart/delShoppingCart', param)
							      	.then(function(response) {
							      		if (response.data.code == 1) {
							      				vm.getpage(response.data.count, 1)
							      				console.log(response.data)
							      				vm.shoppingCartList=response.data.result
							      				vm.shoppingcartnumber=response.data.count
							      		} else if (response.data.code == 0) {
							      			console.log(response)
							      			console.log(response.data.msg)
							      
							      		}
							      	})
							      	.catch(function(error) {
							      		console.log(error);
							});  
							
							
					
					},
					createOrder: function(obj) {
						layui.use('layer', function(){
						  var layer = layui.layer;
						  layer.open({
						    type: 1
						    ,title:"订单明细"//不显示标题栏
						    ,closeBtn: false
						    ,area: ['600px', '400px']
						    ,shade: 0.8
						    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
						    ,btn: ['确认购买', '取消']
						    ,btnAlign: 'c'
						    ,moveType: 1 //拖拽模式，0或者1
						    ,content: '<div style="padding: 76px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">用户名:'+$cookies.get("userName")+'<br><br>商品名:'+vm.shoppingCartList[obj.target.id].itemName+'<br><br>数量:'+vm.shoppingCartList[obj.target.id].number+'<br><br>总价:'+vm.shoppingCartList[obj.target.id].itemPrice*vm.shoppingCartList[obj.target.id].number+'</div>'
						    ,yes: function(index, layero){
						       let param = new URLSearchParams()
						       param.append('userId', $cookies.get("userId"))
						       param.append('passWord', $cookies.get("passWord"))
						       param.append('userName', $cookies.get("userName"))
						       param.append('Number', vm.shoppingCartList[obj.target.id].number)
							   param.append('itemId', vm.shoppingCartList[obj.target.id].itemId)
						       console.log(param.toString())
						       axios.post(URL + '/Order/createOrder',param
					)
						       	.then(function(response) {
						       		if (response.data.code == 1) {
										vm.delShoppingCartWithoutTips(obj)
						       			layer.msg("购买成功")
						       		} else if (response.data.code == 0) {
						       			console.log(response)
						       			console.log(response.data.msg)
						       
						       		}
						       	})
						       	.catch(function(error) {
						       		console.log(error);
						       	});
							   layer.close(index);
						      },
							  btn2: function(index, layero){
						
						    console.log(2345)
						
						  }
						  });
						});     
					},
					loginplease: function() {
						if (this.loginflag)
							window.location.href = 'user.html'; //跳转主页
						else
							window.location.href = 'login.html'; //跳转主页
					},
					initShoppingCartList: function() {
						let param = new URLSearchParams()
						param.append('userId', $cookies.get("userId"))
						param.append('passWord', $cookies.get("passWord"))
						param.append('userName', $cookies.get("userName"))
						param.append('Page', vm.page)
						console.log(param.toString())
						//加载购物车列表
						axios.post(URL + '/shoppingCart/shoppingCartList', param)
							.then(function(response) {
								if (response.data.code == 1) {
									console.log("加载购物车成功")
									if (!vm.haveInit) {
										console.log("执行lay")
										vm.getpage(response.data.count, 1)
										vm.haveInit = true
									}
									console.log(response.data)
									vm.shoppingCartList = response.data.result

								} else if (response.data.code == 0) {
									console.log(response)
									console.log(response.data.msg)

								}
							})
							.catch(function(error) {
								console.log(error);
							});

					},

				},

				created: function() {
					checklogin().then(x => {
						if (x) {

							if ($cookies.get("userName") != null)
								this.username = $cookies.get("userName")
							if ($cookies.get("userShowName") != null)
								this.userShowName = $cookies.get("userShowName")
							this.loginflag = $cookies.get("loginflag")
							vm.initShoppingCartList()

						} else {
						layui.use('layer', function(){
							  var layer = layui.layer;
							  layer.open({
								 title:"提示"//不显示标题栏
							    ,closeBtn: false
							    ,shade: 0.8
							    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
							    ,btn: ['确认', '取消']
							    ,btnAlign: 'c'
							    ,moveType: 1//拖拽模式，0或者1
								,type:0
							    ,content: '请重新登陆再使用订单功能'
							    ,yes: function(index, layero){
							     	window.location.href = 'login.html'
								   layer.close(index);
							      },
								  btn2: function(index, layero){
									  	window.location.href = 'index.html'
							  }
							  });
							}); 
						}
					})

				},
				mounted: function() {


				}


			})
		</script>


		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});
		</script>

	</body>
</html>
